<template>
	<view class="pb-30">
		<image class="fixed top-0 index--1" style="width: 750rpx; height: 634rpx" src="/static/login-bg.png"></image>
		<uv-navbar :fixed="false" bgColor="transparent" :leftIcon="undefined" leftText="选择"></uv-navbar>

		<view class="header fs-46 color-primary2">
			<view>请选择</view>
			<view class="fw-700">您的角色身份</view>
		</view>

		<view class="list-container">
			<view class="list-item" @click="roleValue = 'customer'">
				<image class="role-image" src="/static/role-customer.png"></image>
				<image class="role-radio" src="/static/role-radio-checked.png" v-if="roleValue === 'customer'"></image>
				<image class="role-radio" src="/static/role-radio.png"></image>
				<view class="role-text fs-36 fw-700">我是客户</view>
			</view>
			<view class="list-item" @click="roleValue = 'staff'">
				<image class="role-image" src="/static/role-staff.png"></image>
				<image class="role-radio" src="/static/role-radio-checked.png" v-if="roleValue === 'staff'"></image>
				<image class="role-radio" src="/static/role-radio.png" v-else></image>
				<view class="role-text fs-36 fw-700">我是员工</view>
			</view>

			<view class="button-wrap">
				<button class="button-item uv-reset-button bg-primary color-f flex-center-center fs-34 fw-700"
					v-if="roleValue === 'customer'" @click="handleAuthLogin">
					授权登录
				</button>
				<button class="button-item uv-reset-button bg-primary color-f flex-center-center fs-34 fw-700"
					v-if="roleValue === 'staff'" @click="handleNext">
					下一步
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// customer=客户 staff=员工
				roleValue: 'customer',
			}
		},
		methods: {
			// 客户授权登录
			async handleAuthLogin() {
				uni.showLoading({
					title: '登录中...',
					mask: true,
				})
				const codeResult = await this.$util.getLoginCode()
				const result = await this.$api.postMiniLogin({
					code: codeResult
				})
				uni.hideLoading()
				this.$store.commit('SET_ROLE_TYPE', this.roleValue)
				this.$store.commit('SET_TOKEN', result.data.token)
				this.$store.commit('SET_OPENID', result.data.openid)
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			// 员工下一步
			handleNext() {
				this.$store.commit('SET_ROLE_TYPE', this.roleValue)
				uni.navigateTo({
					url: 'login'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.header {
		padding: 100rpx 58rpx 0;
	}

	.list-container {
		width: 630rpx;
		margin: 98rpx auto 0;
	}

	.list-item {
		position: relative;

		&+.list-item {
			margin-top: 36rpx;
		}
	}

	.role-image {
		width: 630rpx;
		height: 180rpx;
	}

	.role-text {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.role-radio {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		top: 50%;
		transform: translateY(-50%);
		right: 59rpx;
	}

	.button-wrap {
		margin-top: 119rpx;
	}

	.button-item {
		width: 622rpx;
		height: 80rpx;
		border-radius: 14rpx;
	}
</style>